/**

 @Name：layui.age Tag标签
 @Author：lih
 @License：MIT

 */

layui.define('jquery', function(exports){
    "use strict";

    var $ = layui.$
        ,MOD_NAME = 'tag',
        TAG_CLASS = '.tag',
        BUTTON_NEW_TAG ='button-new-tag',
        INPUT_NEW_TAG ='input-new-tag',
        TAG_ITEM ='tag-item',
        CLOSE = 'tag-close',
        DEFAULT_SKIN ='layui-btn layui-btn-primary layui-btn-sm'
        ,tag = function(){
            this.config = {
                likeHref: layui.cache.base + 'tag.css',
                skin: DEFAULT_SKIN,
                tagText:'+ New Tag'
            };
            this.configs = {}
        };

    //全局设置
    tag.prototype.set = function(options){
        var that = this;
        $.extend(true, that.config, options);
        tag.render();
        return that;
    };

    //表单事件监听
    tag.prototype.on = function(events, callback){
        return layui.onevent.call(this, MOD_NAME, events, callback);
    };

    //外部Tag新增
    tag.prototype.add = function(filter, options){
        var tagElem = $(TAG_CLASS + '[lay-filter='+ filter +']')
        call.add(null, tagElem, options);
        call.tagAuto(filter);
        return this;
    };

    //外部Tag删除
    tag.prototype.delete = function(filter, layid){
        var tagElem = $(TAG_CLASS + '[lay-filter='+ filter +']')
            ,tagItemElem = tagElem.find('>.' + TAG_ITEM + '[lay-id="'+ layid +'"]');
        call.delete(null, tagItemElem);
        return this;
    };

    //基础事件体
    var call = {
        //Tag点击
        tagClick: function(e, index, tagItemElem, options){
            options = options || {};
            var othis = tagItemElem || $(this)
                ,index = index || othis.index(othis)
                ,parents = othis.parents(TAG_CLASS).eq(0)
                ,filter = parents.attr('lay-filter');
            layui.event.call(this, MOD_NAME, 'click('+ filter +')', {
                elem: parents
                ,index: index
            });
        }
        //Tag新增事件
        ,add: function(e, tagElem, options){
            var  filter = tagElem.attr('lay-filter'),
                buttonNewTag = tagElem.children('.' + BUTTON_NEW_TAG),
                index = buttonNewTag.index()
                ,newTag = '<button lay-id="'+ (options.id||'') +'"' +(options.attr ? ' lay-attr="'+ options.attr +'"' : '') +' type="button" class="' + TAG_ITEM  + '">'+ (options.text||'unnaming') +'</button>';
            var result = layui.event.call(this, MOD_NAME, 'add('+ filter +')', {
                elem: tagElem
                ,index: index
                ,othis: newTag
            })
            if(result === false) return;
            buttonNewTag[0] ? buttonNewTag.before(newTag) : tagElem.append(newTag);
        }
        //Tag输入事件
        ,input: function(e, othis){
            var buttonNewTag = othis || $(this)
                ,parents = buttonNewTag.parents(TAG_CLASS).eq(0)
                ,filter = parents.attr('lay-filter')
            var options = tag.configs[filter] = $.extend({}, tag.config, tag.configs[filter] || {}, options);
            //标签输入框
            var inpatNewTag = $('<div class="' + INPUT_NEW_TAG + '"><input type="text" autocomplete="off" class="layui-input"></div>');
            inpatNewTag.addClass(options.skin);
            buttonNewTag.after(inpatNewTag).remove();
            inpatNewTag.children('.layui-input').on('blur', function () {
                if(this.value){
                    var options = {
                        text: this.value
                    }
                    call.add(null, parents, options);
                }
                inpatNewTag.remove();
                call.tagAuto(filter);
            }).focus();
        }
        //Tag删除
        ,delete: function(e, othis){
            var tagItem = othis || $(this).parent(), index = tagItem.index()
                ,parents = tagItem.parents(TAG_CLASS).eq(0)
                ,filter = parents.attr('lay-filter');

            var result = layui.event.call(this, MOD_NAME, 'delete('+ filter +')', {
                elem: parents
                ,index: index
            })
            if(result === false) return;
            tagItem.remove()
        }
        //Tag 自适应
        ,tagAuto: function(filter){
            filter = filter || '';
            var options = filter ? tag.configs[filter] || tag.config : tag.config;
            var elemFilter = function(){
                return filter ? ('[lay-filter="' + filter +'"]') : '';
            }();
            $(TAG_CLASS + elemFilter).each(function(){
                var othis = $(this),tagItem = othis.children('.' + TAG_ITEM), buttonNewTag = othis.children('.' + BUTTON_NEW_TAG);
                tagItem.removeClass(DEFAULT_SKIN).addClass(options.skin);
                //允许关闭
                if(othis.attr('lay-allowClose') && tagItem.length){
                    tagItem.each(function(){
                        var li = $(this);
                        if(!li.find('.'+CLOSE)[0]){
                            var close = $('<i class="layui-icon layui-unselect '+ CLOSE +'">&#x1006;</i>');
                            close.on('click', call.delete);
                            li.append(close);
                        }
                    });
                }
                //允许新增标签
                if(othis.attr('lay-newTag') && buttonNewTag.length === 0){
                    buttonNewTag = $('<button type="button" class="' + BUTTON_NEW_TAG + '"></button>');
                    buttonNewTag.on('click', call.input);
                    othis.append(buttonNewTag);
                }
                buttonNewTag.html(options.tagText);
                buttonNewTag.removeClass(DEFAULT_SKIN).addClass(options.skin);
            });
        }
    };

    //初始化元素操作
    tag.prototype.init = function(filter, options){
        layui.link(tag.config.likeHref);
        if(filter){
            tag.configs[filter] = $.extend({}, tag.config, tag.configs[filter] || {}, options);
        }
        return call.tagAuto.call(this, filter);
    };

    tag.prototype.render = tag.prototype.init;

    var tag = new tag(), dom = $(document);
    tag.render();

    dom.on('click', '.' + TAG_ITEM, call.tagClick); //tag 单击事件
    exports(MOD_NAME, tag);
});

